<style lang="less">
  @import "../../assets/css/iconfont/iconfont.css";
</style>
<template>
  <i :class="classes" :style="styles" @click="$emit('clickIcon')"></i>
</template>
<script>
  const prefixCls = 'iconfont'
  export default {
    name: 'iconfont',
    componentName: 'iconFont',
    props: {
      type: String,
      size: [Number, String],
      color: String,
      fontStyle: {
        default: 'normal',
        type: String
      }
    },
    computed: {
      classes() {
        return `${prefixCls} icon-${this.type}`
      },
      styles() {
        let style = {}
        style['font-style'] = `normal`
        if (this.size) {
          style['font-size'] = `${this.size}rem`
        }
        if (this.fontStyle) {
          style['font-style'] = this.fontStyle
        }
        if (this.color) {
          style.color = this.color
        }
        return style
      }
    }
  }
</script>
